<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安装引导</title>
    <link rel="shortcut icon" href="/favicon.png">
    <!-- vue -->
    <script src="{static url='/third-party/vue/3.2.47.prod.min.js'}"></script>
    <!-- axios -->
    <script src="{static url='/third-party/axios/1.3.4.min.js'}"></script>
    <!-- ant design vue 4.0.1 2023.8.26 更新 -->
    <script src="{static url='/third-party/dayjs/dayjs.min.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/customParseFormat.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/weekday.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/localeData.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/weekOfYear.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/weekYear.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/advancedFormat.js'}"></script>
    <script src="{static url='/third-party/dayjs/plugin/quarterOfYear.js'}"></script>
    <script src="{static url='/third-party/antd-vue-v4/antd.min.js'}"></script>
    <link href="{static url='/third-party/antd-vue-v4/reset.css'}" rel="stylesheet">
    <!-- font -->
    <link href="{static url='/third-party/fa/css.css'}" rel="stylesheet">
    <!-- 样式 -->
    {literal}
    <style type="text/css">
        body, html {
            padding: 0;
            margin: 0;
            font-size: 14px;
            background: #f9f9f9;

            --space-width: 10px;
            --radius-width: 3px;
        }
        .medium-text{ color: #999; }
        .text-small{ font-size: 12px; }
        .text-large{ font-size: 16px; }
        .text-bold{ font-weight: bold; }
        .text-center{ text-align: center; }
        header{ background: #fff; padding: var(--space-width) 0; }
        a{ text-decoration: none; color: #333; transition: .3s; }
        a:hover{ color: #1890ff; }
        .container { max-width: 800px; margin: 0 auto;}
        .flex-row { display: flex; flex-flow: row; }
        .flex-row .start { padding-right: var(--space-width); }
        .flex-row .center { flex: 1; }
        .flex-row .end { padding-left: var(--space-width); }
        .justify-center{ display: flex; flex-flow: column; justify-content: center; }

        .steps-wrap{ margin-top: var(--space-width); background: #fff; border-radius: var(--radius-width); padding: var(--space-width); }

        .license{ border: solid 1px #ccc; }
        .license .title{ background: #eee; padding: 15px; font-size: 16px; font-weight: bold; }
        .license .content{ padding: var(--space-width); height: 400px; overflow: auto; line-height: 1.5em; }
        .license .content p{text-indent: 2em; padding: 3px 0; margin: 0;}
        .license .content a{ color: #1890ff; }
        .license .content a:hover{ text-decoration: underline; }

        .table{ border: solid 1px #ddd; width: 100%;}
        .table tr th{ background: #eee; padding: 15px; text-align: left; }
        .table tr{ border-bottom: solid 1px #ddd; }
        .table tr td{  padding: 15px; }
        .table tr:last-child{ border-bottom: none; }

        .result-icon{
            width: 100px;
            height: 100px;
            font-size: 24px;
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            flex-flow: column;
            justify-content: center;
        }
        .result-icon.error{ background: #ff0000; }
        .result-icon.warning{ background: #ff9e00; }
        .result-icon.success{ background: #3cc73c; }
        .result-icon svg{display: block; margin: 0 auto;}

        form input{ width: 250px; border: solid 1px #ccc; padding: 8px; outline: none; transition: .3s; }
        form input:focus{ box-shadow: 0 0 3px #1890ff; }
    </style>
    {/literal}
</head>
<body>
<div id="app-outlet">
    <header>
        <div class="container flex-row">
            <div class="start justify-center">
                <img src="/favicon.png" height="42" alt="INPHP">
            </div>
            <div class="center justify-center">
                <div class="text-large" style="color: darkorange; font-weight: bold; ">INPHP</div>
                <div class="text-small" style="padding-top: 3px;">安装引导程序</div>
            </div>
            <div class="end text-large justify-center"><a href="https://www.inphp.cc" target="_blank">官方网站</a></div>
            <div class="end text-large justify-center"><a href="https://www.inphp.cc/store" target="_blank">应用商城</a></div>
            <div class="end text-large justify-center"><a href="https://www.inphp.cc/bbs" target="_blank">技术论坛</a></div>
        </div>
    </header>
    <div class="container">
        {if !$installed}
        <!-- 未安装 -->
        <div class="steps-wrap" style="padding: 20px 30px;">
            <a-steps :current="step" :items="items"></a-steps>
        </div>
        <div style="padding: 30px; background: #fff; margin: var(--space-width) 0; border-radius: var(--radius-width);">
            {if $step == 3}
            <div class="">
                <!--
                <div class="result-icon error">
                    <svg viewBox="0 0 1024 1024" width="72" height="72" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M167.649789 128.588657 893.229143 854.16801 854.953398 892.442732 129.375068 166.863379 167.649789 128.588657Z" fill="white"></path><path d="M893.229143 166.878728 167.665139 892.442732 129.375068 854.151637 854.939071 128.588657 893.229143 166.878728Z" fill="white"></path><path d="M479.051075 145.549957" fill="white"></path></svg>
                </div>
                -->
                {if !$success}
                <div class="result-icon warning">
                    <svg width="72" height="72" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M448 255.424C448 220.416 476.416 192 512 192a64 64 0 0 1 64 63.424v257.184a63.584 63.584 0 0 1-64 63.424 64 64 0 0 1-64-63.424V255.424zM512 768a64 64 0 1 0 0.032-127.968A64 64 0 0 0 512 768z" fill="white"></path></svg>
                </div>
                {else}
                <div class="result-icon success">
                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="72" height="72"><path d="M887.904 298.208c-12.864-12.064-33.152-11.488-45.216 1.408L415.936 753.984l-233.12-229.696C170.208 511.872 149.952 512 137.536 524.608c-12.416 12.576-12.256 32.864 0.352 45.248l256.48 252.672c0.096 0.096 0.224 0.128 0.32 0.224 0.096 0.096 0.128 0.224 0.224 0.32 2.016 1.92 4.448 3.008 6.784 4.288 1.152 0.672 2.144 1.664 3.36 2.144 3.776 1.472 7.776 2.24 11.744 2.24 4.192 0 8.384-0.832 12.288-2.496 1.312-0.544 2.336-1.664 3.552-2.368 2.4-1.408 4.896-2.592 6.944-4.672 0.096-0.096 0.128-0.256 0.224-0.352 0.064-0.096 0.192-0.128 0.288-0.224l449.184-478.208C901.44 330.592 900.768 310.336 887.904 298.208z" fill="white"></path></svg>
                </div>
                {/if}
                <div class="text-center" style="padding-top: 20px; font-size: 20px;">{$title}</div>
                <div class="text-center medium-text" style="padding-top: var(--space-width); padding-bottom: 20px;">{$message}</div>
                {if isset($restoreSuccess)}
                <div class="text-center medium-text" style="padding-top: var(--space-width); padding-bottom: 20px;">数据库恢复状态：成功<font color="#006400">{$sqlSuccess}</font>，失败<font color="red">{$sqlFail}</font></div>
                {/if}
                {if $success}
                <div class="text-center medium-text" style="margin:0 100px; border-top: solid 1px #eee; padding-top: 20px;">超管用户名：<font color="orange">{$post.username|default:''}</font>，密码：<font color="orange">{$post.password|default:''}</font></div>
                {/if}
                <div class="text-center" style="padding-top: 50px;">
                    {if $success}
                    <a-button size="large" type="primary" style="margin-right: var(--space-width);" href="{url url='/admin/admin/login'}?username={$post.username}&password={$post.password}">进入控制面板</a-button>
                    <a-button size="large" href="/">进入首页</a-button>
                    {else}
                    <a-button size="large" href="?step=2">返回上一步</a-button>
                    {/if}
                </div>
            </div>
            {elseif $step == 2}
            <form action="{url url='/install'}" method="post">
                <input type="hidden" name="step" value="3">
                <div class="text-bold" style="padding-bottom: var(--space-width);">系统设定</div>
                <table class="table" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="150">超管账号</td>
                        <td>
                            <input name="username" placeholder="英文开头+数字+下划线+英文结尾，最少6位长度" type="text" :value="username">
                        </td>
                    </tr>
                    <tr>
                        <td>超管登陆密码</td>
                        <td>
                            <input name="password" placeholder="6~16位长度" type="text" value="123456">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="color: orange;"><i class="fa-solid fa-circle-info"></i> 此超管账号将保存在配置文件中。</td>
                    </tr>
                </table>
                <div class="text-bold" style="padding: 30px 0 var(--space-width) 0;">Redis配置</div>
                <table class="table" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="150">服务器地址</td>
                        <td>
                            <input name="redis_host" placeholder="IP或域名" type="text" value="127.0.0.1">
                        </td>
                    </tr>
                    <tr>
                        <td>端口</td>
                        <td>
                            <input name="redis_port" placeholder="纯数字" type="number" value="6379">
                        </td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input name="redis_password" placeholder="选填" type="text" value="">
                        </td>
                    </tr>
                </table>
                <div class="text-bold" style="padding: 30px 0 var(--space-width) 0;"><a-checkbox name="database" v-model:checked="database">Mysql数据库配置</a-checkbox></div>
                <table class="table" cellpadding="0" cellspacing="0" v-if="database">
                    <tr>
                        <td width="150">服务器地址</td>
                        <td>
                            <input name="db_host" placeholder="IP或域名" type="text" value="127.0.0.1">
                        </td>
                    </tr>
                    <tr>
                        <td>端口</td>
                        <td>
                            <input name="db_port" placeholder="纯数字" type="number" value="3306">
                        </td>
                    </tr>
                    <tr>
                        <td>数据库用户名</td>
                        <td>
                            <input name="db_username" placeholder="" type="text" value="root">
                        </td>
                    </tr>
                    <tr>
                        <td>数据库密码</td>
                        <td>
                            <input name="db_password" placeholder="" type="text" value="12345678">
                        </td>
                    </tr>
                    <tr>
                        <td>数据库名称</td>
                        <td>
                            <input name="db_name" placeholder="若数据库不存在，系统会尝试创建" type="text" value="inphp">
                        </td>
                    </tr>
                    <tr>
                        <td>表名前缀</td>
                        <td>
                            <input name="db_prefix" placeholder="可选" type="text" value="pre_">
                        </td>
                    </tr>
                    {if isset($sql) && $sql}
                    <tr style="color: red;">
                        <td>检测到数据库文件，是否恢复？</td>
                        <td>
                            <label><input style="width: auto; margin-right: 8px;" type="checkbox" name="restore" value="1" checked>恢复数据库备份文件</label>
                        </td>
                    </tr>
                    {/if}
                    <tr>
                        <td colspan="3" style="color: orange; line-height: 1.5em;"><i class="fa-solid fa-circle-info"></i> 本开源软件不包含任何数据，仅保存Mysql数据库配置，方便开发使用。请务必填写正确，否则有可能在检测连接时，会超时卡死！如果您在根目录存放有<font color="red">install.sql</font>文件，则系统会检测出来，并提示您恢复该数据库备份，此功能仅作为辅助使用，请务必保证SQL文件格式正确，如果文件过大，导入需要一定的时间，请耐心等待，最终是否恢复成功，以结果为准！</td>
                    </tr>
                </table>
                <div style="text-align: center; padding-top: 30px;">
                    <a-button size="large" href="?step=1">上一步</a-button>
                    <a-button style="margin-left: var(--space-width);" size="large" type="primary" html-type="submit">确认配置</a-button>
                </div>
            </form>
            {elseif $step == 1}
            <div class="text-bold" style="padding-bottom: var(--space-width);">服务器信息</div>
            <table cellspacing="0" cellpadding="0" class="table">
                <tr>
                    <th width="200">参数</th>
                    <th>值</th>
                </tr>
                <tr>
                    <td>服务器域名</td>
                    <td>{$server.host}</td>
                </tr>
                <tr>
                    <td>操作系统</td>
                    <td>{$smarty.const.PHP_OS}</td>
                </tr>
                <tr>
                    <td>服务引擎</td>
                    <td>{$server.server}</td>
                </tr>
                <tr>
                    <td>PHP版本</td>
                    <td>{$server.version}</td>
                </tr>
                <tr>
                    <td>安装目录</td>
                    <td>{$server.root}</td>
                </tr>
            </table>
            <div class="text-bold" style="padding:30px var(--space-width) var(--space-width) 0;">系统环境检测</div>
            <table cellspacing="0" cellpadding="0" class="table">
                <tr>
                    <th width="200">函数变量</th>
                    <th width="250">要求</th>
                    <th>实际</th>
                </tr>
                <tr>
                    <td>PHP版本</td>
                    <td>8.0.0</td>
                    <td style="color: {if $env.version}darkorange{else}red{/if};">{$server.version}</td>
                </tr>
                <tr>
                    <td>PDO</td>
                    <td>是</td>
                    <td style="color: {if $env.pdo}darkorange{else}red{/if};">{if $env.pdo}是{else}否{/if}</td>
                </tr>
                <tr>
                    <td>mysqli</td>
                    <td>是</td>
                    <td style="color: {if $env.mysqli}darkorange{else}red{/if};">{if $env.mysqli}是{else}否{/if}</td>
                </tr>
                <tr>
                    <td>redis</td>
                    <td>是</td>
                    <td style="color: {if $env.redis}darkorange{else}red{/if};">{if $env.redis}是{else}否{/if}</td>
                </tr>
                <tr>
                    <td>GD库</td>
                    <td>是</td>
                    <td style="color: {if $env.gd}darkorange{else}red{/if};">{if $env.gd}是{else}否{/if}</td>
                </tr>
                <tr>
                    <td>fileinfo</td>
                    <td>是</td>
                    <td style="color: {if $env.fileinfo}darkorange{else}red{/if};">{if $env.fileinfo}是{else}否{/if}</td>
                </tr>
                <tr>
                    <td>curl</td>
                    <td>是</td>
                    <td style="color: {if $env.curl}darkorange{else}red{/if};">{if $env.curl}是{else}否{/if}</td>
                </tr>
            </table>
            <div class="text-bold" style="padding:30px var(--space-width) var(--space-width) 0;">目录权限</div>
            <table cellspacing="0" cellpadding="0" class="table">
                <tr>
                    <th width="200">目录名称</th>
                    <th width="250">读</th>
                    <th>写</th>
                </tr>
                {foreach $dirList as $dir}
                <tr>
                    <td>/{$dir.name}</td>
                    <td style="color: {if $dir.read}darkorange{else}red{/if};">{if $dir.read}是{else}否{/if}</td>
                    <td style="color: {if $dir.write}darkorange{else}red{/if};">{if $dir.write}是{else}否{/if}</td>
                </tr>
                {/foreach}
            </table>
            <div style="text-align: center; padding-top: 30px;">
                <a-button size="large" href="?step=0">上一步</a-button>
                {if $env.version && $env.pdo && $env.gd && $env.fileinfo && $env.curl && $rw}
                <a-button style="margin-left: var(--space-width);" size="large" type="primary" href="?step=2">下一步</a-button>
                {/if}
            </div>
            {else}
            <div class="license">
                <div class="title">阅读许可协议</div>
                <div class="content">
                    <p><b>版权所有 © 2023 <a href="https://www.inphp.cc" target="_blank">INPHP</a> 开源团队保留所有权利。</b></p>
                    <p>感谢您选择使用INPHP开源软件，该软件基于PHP的技术开发，核心包主要使用MYSQL和Redis缓存技术，同时兼容使用了swoole拓展，支持协程服务。源码全部开源，开源目的给喜欢PHP的开发者们一起学习，供大家参考，共同进步。您在使用本开源软件之时，务必遵守我们中华人民共和国的相关法律法规，合法合理的使用本软件。请您在使用前务必认真阅读清楚并理解下面的协议条款：</p>
                    <p><b>一、本软件目前(2023年8月26日)使用<a href="https://opensource.org/license/mit">MIT开源协议</a>，请在此开源协议规定下使用本软件源码。</b></p>
                    <p><font color="red">如开源协议有所变更，变更前已存在的版本代码将不受变更后的协议影响，可以继续按照变更前的协议继续使用。</font></p>
                    <p><b>二、关于商用说明</b></p>
                    <p>本软件支持任何形式的商用，但也希望您在商用的同时，能在项目中声明使用了本软件做为技术基础，如为网站应用，希望能在网站首页的底部增加友情链接链至：<a href="https://inphp.cc" target="_blank">https://inphp.cc</a>。该要求并非强制性，最终由您决定。</p>
                    <p><b>三、要限担保和免责声明</b></p>
                    <p>本开源软件及附带的文件，不提供任何明确的或隐含的赔偿或担保，您在使用本软件之前，必须明确您是自愿性的使用本开源软件，本开源软件仅提供一种软件开发思路，我们不对您使用本开源软件产生的任何结果承担责任。</p>
                    <p>我们提供有偿的技术服务，但在尚未购买技术服务之前，我们不承诺对免费用户提供任何形式的技术支持、使用担保。也不承担任何因使用本软件而产生问题的相关责任。</p>
                    <p>因本软件的开源性质，若本软件包含有其它开源软件子包（默认包含了：<a href="https://github.com/guzzle/guzzle" target="_blank">guzzlehttp</a>, <a href="https://github.com/smarty-php/smarty" target="_blank">smarty</a>, <a href="https://gitee.com/inphp-modules/core" target="_blank">inphp core</a>），请遵守这些开源软件的版权要求，这些版权并不全属于我们的，请在对应的开源协议规定下使用。若需要授权，请在应用发布之前，购买相关授权。</p>
                    <p>本软件面向互联网公开，而互联网犯罪是时常存在的，请勿将本软件用于任何违法犯罪活动，包括但不限于：博彩、诈骗、虚拟货币、色情娱乐等类型的项目，我们有权对该类使用者保留追究相关责任的权力。</p>
                    <p><font color="#ff8c00">2023年8月24日，日本执意将核污染的废水排入海洋！请铭记日本再次犯下的罪恶！</font></p>
                </div>
            </div>
            <div style="padding-top: var(--space-width);">
                <a-checkbox v-model:checked="agreement">我已阅读并完全理解且同意此协议</a-checkbox>
            </div>
            <div style="text-align: center; padding-top: 30px;">
                <a-button size="large" :disabled="!agreement" type="primary" @click="next()">下一步</a-button>
            </div>
            {/if}
        </div>
        {else}
        <!-- 已安装 -->
        <div style="padding: 30px; background: #fff; margin: var(--space-width) 0; border-radius: var(--radius-width);">
            <div class="result-icon warning">
                <svg width="72" height="72" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M448 255.424C448 220.416 476.416 192 512 192a64 64 0 0 1 64 63.424v257.184a63.584 63.584 0 0 1-64 63.424 64 64 0 0 1-64-63.424V255.424zM512 768a64 64 0 1 0 0.032-127.968A64 64 0 0 0 512 768z" fill="white"></path></svg>
            </div>
            <div class="text-center" style="padding-top: 20px; font-size: 20px;">安装警告</div>
            <div class="text-center medium-text" style="padding-top: var(--space-width);">此系统已安装完成，不可重复安装！</div>
        </div>
        {/if}
    </div>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, theme } = antd;
    const app = createApp({
        data() {
            return {
                username: '',
                agreement: false,
                database: true,
                step: parseInt("{$step|default:0}"),
                items: [
                    { key:'one', title: "许可协议" },
                    { key:'two', title: "环境检测" },
                    { key:'three', title: "参数配置" },
                    { key:'four', title: "安装结果" }
                ]
            }
        },
        mounted() {
            this.username = "admin" + Math.ceil(Math.random() * 100);
        },
        methods: {
            next() {
                if (this.step === 0 && !this.agreement) {
                    return;
                }
                window.location.href = "?step=" + (this.step+1);
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
</body>
</html>